<template>
  <view class="login-code">
    <u-navbar
      :placeholder="true"
      bgColor="transparent"
      title=" "
      leftIcon=" "
      :autoBack="true"
      :safeAreaInsetTop="true"></u-navbar>
    <view class="t">输入验证码</view>
    <view class="tip">
      已发送六位数验证码至
      <text>{{ phone }}</text>
    </view>
    <view class="code-box">
      <u-code-input v-model="code" :fontSize="24"></u-code-input>
    </view>
    <view class="time">
      <text>{{ time }}</text>
    </view>
    <view class="btn" @click="this.toRoute('/login-password')">确认</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      seconds: 60,
      phone: "",
      code: "",
      time: "重新获取",
    };
  },
  onLoad(options) {
    this.phone = options.phone;
  },
  methods: {
    codeChange(e) {
      console.log("e-----", e);
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}
.login-code {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 32upx;
  /deep/.u-code-input > view {
    width: 100upx !important;
    height: 100upx !important;
    margin-right: 18upx !important;
    font-size: 48rpx !important;
    color: #000000;
  }
  /deep/.u-code-input__input {
    height: 100upx !important;
  }

  .t {
    font-weight: bold;
    font-size: 40rpx;
    color: #000000;
    margin-top: 60upx;
    margin-bottom: 60upx;
  }
  .tip {
    font-weight: bold;
    font-size: 24rpx;
    color: #999999;
    & > text {
      font-weight: bold;
      font-size: 24rpx;
      color: #f49c0d;
      margin-left: 28upx;
    }
  }
  .code-box {
    margin: 74upx 0 24upx;
  }
  .time {
    text-align: right;
    & > text {
      display: inline-block;
      background: #f49c0d;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      padding: 8upx 46upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  .btn {
    width: 100%;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    text-align: center;
    line-height: 80upx;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    margin-top: 88upx;
  }
}
</style>
